<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>MusicSem</title>
<link rel="stylesheet" href="style.css" type="text/css" /> 
<link rel="stylesheet" href="jquery/css/ui-lightness/jquery-ui-1.7.2.custom.css" type="text/css" />

<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="jquery/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="swfobject/swfobject.js"></script>

<script type="text/javascript">
	//set draggable containers
	$(function() {
		$("#artist-container").draggable();
		$("#event-container").draggable();
		$("#map-container").draggable();
		$("#video-container").draggable({
			handles: "all",
			opacity: 1.0
		});
		$("#image-container").draggable();
		//$("#test-container").draggable();
	});

	//set resizable containers
	$(function(){
		$("#artist-container").resizable({
			handles: "all",
			stop: function(){
				//determine new div size
				var w = document.getElementById("artist-container").offsetWidth;
				var h = document.getElementById("artist-container").offsetHeight;
				h = h - 20 - 20;
				//set new size
				document.getElementById("artist-content").style.width=w+"px";
				document.getElementById("artist-content").style.height=h+"px";
			}
		});
		$("#event-container").resizable({
			handles: "all",
			stop: function(){
				//determine new div size
				var w = document.getElementById("event-container").offsetWidth;
				var h = document.getElementById("event-container").offsetHeight;
				h = h - 20 - 20;
				//set new size
				document.getElementById("event-content").style.width=w+"px";
				document.getElementById("event-content").style.height=h+"px";
			}
		});
		$("#map-container").resizable({
			handles: "all",
			stop: function(){
				//get old center
				var oldCenter = map.getCenter();
				//determine div new size
				var w = document.getElementById("map-container").offsetWidth;
				var h = document.getElementById("map-container").offsetHeight;
				h = h - 20 - 20;
				//set new size
				document.getElementById("map_canvas").style.width=w+"px";
				document.getElementById("map_canvas").style.height=h+"px";
				//tell map to check new size
				google.maps.event.trigger(map, 'resize');
				//set new center as old center
				map.setCenter(oldCenter);
			}
		});
		/* Video container should not be resizable
		$("#video-container").resizable({
			handles: "all",
			stop: function(){
				//determine new div size
				var w = document.getElementById("video-container").offsetWidth;
				var h = document.getElementById("video-container").offsetHeight;
				h = h - 20 - 20;
				//set new size
				document.getElementById("video-content").style.width=w+"px";
				document.getElementById("video-content").style.height=h+"px";
				//resize SWF object
				resizeSWF(w, h);
			}
		});
		*/
		$("#image-container").resizable({
			handles: "all",
			stop: function(){
				//determine new div size
				var w = document.getElementById("image-container").offsetWidth;
				var h = document.getElementById("image-container").offsetHeight;
				h = h - 20 - 20;
				//set new size
				document.getElementById("image-content").style.width=w+"px";
				document.getElementById("image-content").style.height=h+"px";
				resizeImage(w, h);
			}
		});
		//$("#test-container").resizable();
	});
</script>
 
<!-- Use the Google AJAX Libraries API:
        http://code.google.com/apis/ajaxlibs/ -->
<script src="http://www.google.com/jsapi"></script>
<script>
	google.load("swfobject", "2.1");
</script>

</head>

<body onload="initializePage();" 
	onmouseup="$(function() { 
		//restore draggable containers
		$('#map-container').draggable('enable'); 
		$('#video-container').draggable('enable');
	});">
<div id="page" class="page">

<div style="text-align:center;">
	<!--  <form action="MainServlet?type=artist"  name="keyform"  onsubmit= "return keyNotEmpty()" method="post">-->
		<br/><br/>
		Artist:
		<input type="text" id="search" name="search" />&nbsp;
		<input type="button" onclick="ajaxSearch(1);" value="Search" />
		<!-- 
		<input type="submit" value="Search" /><br />
		 -->
	<!-- </form> -->		
	<br /><br />
	<!-- 
	<input type="button" onclick="divloading();" value="TestLoading" />
	<input type="button" onclick="divloaded();" value="TestLoaded" />
	 -->
	<br /><br />
</div>

<div id="loadingdiv" class="not-loading" style="position:fixed;top:5px;left:5px;z-index:100;">
	<img src="images/loading.gif" alt="loading..." />
</div>

<!-- ************************************* ARTIST ********************************************** -->
<div id="artist-container" class="content-container" onmousedown="increaseZ('artist-container');">
	<div id="artist" class="content-box">
		<div id="artist-title" class="content-title">Artist</div>
		<div id="artist-content" class="content-inside">
		</div>
	</div>
	<div id="artist-bottom" class="bottombar">
		
	</div>
	<div id="artist-hover" class="content-hover"><img src="images/loading.gif" alt="loading..." /></div>
</div>

<!-- ************************************* EVENT *********************************************** -->
<div id="event-container" class="content-container" onmousedown="increaseZ('event-container');">
	<div id="event" class="content-box">
		<div id="event-title" class="content-title">Events</div>
		<div id="event-content" class="content-inside">
		</div>
	</div>
	<div id="event-bottom" class="bottombar" >
		
	</div>
	<div id="event-hover" class="content-hover"><img src="images/loading.gif" alt="loading..." /></div>
</div>

<!-- ************************************* MAP ************************************************** -->
<div id="map-container" class="content-container" onmousedown="increaseZ('map-container');">
	<div id="map" class="content-box">
		<div id="map-title" class="content-title">Map</div>
		<div id="map_canvas" class="content-inside" 
			onmousedown="$(function() { $('#map-container').draggable('disable'); });">
		</div>
		<div id="map-bottom" class="bottombar" >
			<input type="button" onclick="eventsInArea();" value="Events in the area" />
		</div>
	</div>
	<div id="map-hover" class="content-hover"><img src="images/loading.gif" alt="loading..." /></div>
</div>

<!-- ************************************* VIDEO *********************************************** -->
<div id="video-container" class="content-container" onmousedown="increaseZ('video-container');">
	<div id="video" class="content-box">
		<div id="video-title" class="content-title">Videos</div>
		<div id="video-content" class="content-inside"
			onmousedown="$(function() { $('#video-container').draggable('disable'); });"
			onmouseup="$(function() { $('#video-container').draggable('enable'); });" 
			>
		<!--<div id="video-content" class="content-inside">-->
		<div id="ytapiplayer"></div>
		</div>
		<div id="video-bottom" class="bottombar">
			<div style="float:left;">
				<a href="javascript:void(0);" onclick="play();">Play</a>
				<a href="javascript:void(0);" onclick="pause();">Pause</a>
				<a href="javascript:void(0);" onclick="stop();">Stop</a>
        	</div>
        	<div style="float:left; padding-left:5px;">
				<span id="videoposition"></span><span id="videototal"></span>
			</div>
        	<div style="float:right;">
				<a href="javascript:void(0);" onclick="previousVideo();" >previous</a> | 
				<a href="javascript:void(0);" onclick="nextVideo();" >next</a>
			</div>	
			<div style="float:right;">
				<span id="videoduration"></span>&nbsp;&nbsp;
			</div>
		</div>
	</div>
	<div id="video-hover" class="content-hover"><img src="images/loading.gif" alt="loading..." /></div>
</div>

<!-- ************************************* IMAGE *********************************************** -->
<div id="image-container" class="content-container" onmousedown="increaseZ('image-container');">
	<div id="image" class="content-box">
		<div id="image-title" class="content-title">Pictures</div>
	<div id="image-content" class="content-inside">
		<div id="image-holder" class="imageholder">
			<a id="imagelink" href="" target="_blank">
				<img id="currentimage" src="" 
					alt="" width="100%" height="100%" />
			</a>
		</div>
	</div>
	<div id="image-bottom" class="bottombar">
		<div style="float: left;">
			<strong><span id="imagetitle"></span></strong>
		</div>
		<div style="float:left; padding-left:5px;">
			<span id="imageposition"></span><span id="imagetotal"></span>
		</div>
		<div style="float:right;">
			<a href="javascript:void(0);" onclick="previousImage();" >previous</a> | 
			<a href="javascript:void(0);" onclick="nextImage();" >next</a>
		</div>
	</div>
	</div>
	<div id="image-hover" class="content-hover"><img src="images/loading.gif" alt="loading..." /></div>
</div>

<!--
<div id="test-container" class="content-container" onmousedown="increaseZ('test-container');">
	<div id="test" class="content-box">
		<div id="test-title" class="content-title">test</div>
		<div id="test-content" class="content-inside">
		</div>
	</div>
	<div id="test-bottom" class="bottombar">
		
	</div>
	<div id="test-hover" class="content-hover"><img src="images/loading.gif" alt="loading..." /></div>
</div>
-->

</div>

<div id="imageholder" style="display:none;"></div>
<div id="videoholder" style="display:none;"></div>
<input type="hidden" id="videoid" value="" />

</body>
</html>
